<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>axio学习（ajax）</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<div id="app">
    <p>
        消息：<span>{{msg}}</span>
    </p>
    <input type="button" value="点击发送ajax请求(old)" @click="qingqiu"/> <br>
    <input type="button" value="点击发送请求体（ajax)" @click="qingqiu2"/> <br>
    <input type="button" value="点击发送请求体对象（ajax)" @click="qingqiu3"/> <br>
    <input type="button" value="点击响应消息（ajax)" @click="xiangying1"/> <br>
    <input type="button" value="点击响应消息对象（ajax)" @click="xiangying2"/> <br>

</div>


<!-- body 末尾处引入 layui -->
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/vue/vue.js}"></script>
<script th:src="@{/static/jquery/jquery.js}"></script>
<script th:src="@{/static/axios/axios.min.js}"></script>
</body>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: "hello Vue",
            context: "/sm2"
        },
        methods: {
            xiangying2() {
                axios.post(this.context + '/axios/resp2').then((res) => {
                    console.log(res.data)
                })
            },
            xiangying1() {
                axios.post(this.context + '/axios/resp').then((res) => {
                    console.log(res.data)
                })
            },
            qingqiu3() {
                axios.post(this.context + '/axios/req2', {
                    name: "张三",
                    password: "1111111",
                    email: "1111@qq.com",
                    gender: "男"
                }).then((res) => {
                    console.log(res.data)
                })

            },
            qingqiu2() {
                axios.post(this.context + '/axios/req', {username: 'ajax'}).then((res) => {
                    console.log(res.data)
                })

            },
            qingqiu() {
                axios.get(this.context + '/axios/old').then(function (res) {
                    console.log(res.data)
                })
                // console.log("你点击了按钮")
                // 发起一个post请求
                // axios({
                //     method: 'get',
                //     url: 'https://api.vvhan.com/api/horoscope',
                //     data: {
                //         type: 'pisces',
                //         time: 'today'
                //     }
                // }).then(function (rep) {
                //     console.log(rep.data)
                // });


            }
        }
    })
</script>
</html>